import React, { useState } from "react";
import { Checkbox, Input, Tabs, Button, Radio, Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

import Header from "../../components/Header";
import Footer from "../../components/Footer";

import Menu from "../../components/Menu";
// import http from "../../request";

const { TabPane } = Tabs;

const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
};
const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
    if (!isJpgOrPng) {
        message.error('上传格式不正确！');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
};

const Setting = () => {

    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );

    return (
        <React.Fragment>
            <Header navCur={7} />
            <div className="Store page u-m-20 u-p-20">
                <Tabs tabBarExtraContent={<Button>保存</Button>}>
                    <TabPane tab="组织机构---测试" key="1">
                        <div className="u-flex u-row-between u-m-t-20">
                            <div className="u-flex">
                                <div className="u-flex u-a-x">
                                    <div className="u-m-l-15">机构查看</div>
                                    <Checkbox className="u-m-l-10">全部</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <div className="u-m-l-15">部门设置</div>
                                    <Checkbox className="u-m-l-10">全部</Checkbox>
                                </div>
                                <div className="u-flex u-a-x-i">
                                    <div className="u-m-l-15">员工新增</div>
                                    <Input className="u-m-l-10" style={{ width: 60, height: 25 }} defaultValue="跨部"></Input>
                                </div>
                                <div className="u-flex u-a-x-i">
                                    <div className="u-m-l-20">员工设置</div>
                                    <Input className="u-m-l-10" style={{ width: 60, height: 25 }} defaultValue="跨部"></Input>
                                </div>
                                <div className="u-flex u-a-x">
                                    <div className="u-m-l-15">个人资料</div>
                                    <Checkbox className="u-m-l-10">修改</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <div className="u-m-l-15">变动记录</div>
                                    <Checkbox className="u-m-l-10">修改</Checkbox>
                                </div>
                                <div className="u-flex u-a-x-i">
                                    <div className="u-m-l-20">员工权限</div>
                                    <Input className="u-m-l-10" style={{ width: 60, height: 25 }} defaultValue="跨部"></Input>
                                </div>
                                <div className="u-flex">
                                    <div className="u-m-l-15">职务权限</div>
                                    <Checkbox className="u-m-l-10">全部</Checkbox>
                                </div>
                            </div>
                        </div>
                <div className="u-m-t-20 u-flex u-col-top">
                    <Menu menuKeys={menuKeys} menuChange={menuChange}/>
                    <Table sticky bordered size="small" scroll={{x: 1280}} rowSelection={{
                        selectedRowKeys: selected,
                        onChange: (key) => {
                            setSelected(key)
                        }
                    }} onRow={e => ({
                        onDoubleClick: () => {
                            setEstateShow(!0)
                            setEstateId(e.id)
                            setEstateTab('1')
                        }
                    })} rowKey={e => e.id+','+e.name+','+(e.region_data?.name??'')} dataSource={source} columns={column} pagination={false} style={{width: '100%', maxHeight: 800, overflowY: 'auto'}}/>
                </div>
                    </TabPane>
                    <TabPane tab="城市片区" key="2">
                        <div className="u-flex u-row-between u-m-t-20">
                            <div className="u-flex">
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">查看</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">新增</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">修改</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">删除</Checkbox>
                                </div>
                                <div className="u-flex">
                                    <Checkbox className="u-m-l-15">合并</Checkbox>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab="楼盘字典" key="3">
                        <div className="u-flex u-row-between u-m-t-20">
                            <div className="u-flex">
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">查看</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">新增</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">修改</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-15">删除</Checkbox>
                                </div>
                                <div className="u-flex">
                                    <Checkbox className="u-m-l-15">锁定</Checkbox>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab="学校字典" key="4">
                        <div className="u-flex u-row-between u-m-t-20">
                            <div className="u-flex">
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-20">学校-楼盘（加入）</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-20">学校-楼盘（修改）</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-20">学校新增</Checkbox>
                                </div>
                                <div className="u-flex u-a-x">
                                    <Checkbox className="u-m-l-20">学校修改</Checkbox>
                                </div>
                                <div className="u-flex">
                                    <Checkbox className="u-m-l-20">学校删除</Checkbox>
                                </div>
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab="管理选项" key="5">
                        <div className="u-flex-col">
                            <Tabs>
                                <TabPane tab="房源[1]" key="6">
                                    <div>
                                        <div className="u-flex u-flex-wrap">
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">房源编号可以手工输入</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">新增房源默认为【私盘】</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">新增房源可选【私盘/公盘】</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">新增房源可选【委托方式】</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">新增房源受部门权限【地理区域】限制</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">房源[交易]中含有【租售】方式</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">房源智能查询包含【楼盘字典-概要地址】</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">房源（面积）查询时使用【套内】面积</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">房源员工查询时同时查【三个归属人】</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">打开资料区（房源）</Checkbox>
                                            </div>
                                        </div>
                                        <hr className="u-m-t-20" />
                                        <div className="u-flex u-flex-wrap">
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[面积]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[委托]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[业主电话]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[价格]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[来源]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[栋座]（住宅）</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[楼层]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[朝向]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[房型]（住宅）</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[总层]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[装修]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[房产证]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[国籍]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[电梯]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[备注]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[现状]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[套内面积]</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[房本年限]（出售）</Checkbox>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">[交房]已租为[到期]</Checkbox>
                                            </div>
                                        </div>
                                        <div className="u-m-l-30" style={{ color: 'red' }}>
                                            以上为必填项
                                        </div>
                                        <hr className="u-m-t-20" />
                                        <div className="u-flex">
                                            <div className="u-flex u-m-t-10">
                                                <Checkbox className="u-m-l-20">新增房源必须符合有效性规则：</Checkbox>
                                                <span style={{ color: '#ccc' }}>楼层&lt;=总层 底价&lt;=报价 套内面积&lt;=建筑面积</span>
                                            </div>
                                            <div className="u-m-t-10">
                                                <Checkbox className="u-m-l-20">所有房源栏目必填（包括上面选项）</Checkbox>
                                            </div>
                                            <div className="u-flex u-m-t-10">
                                                <div>新增房源查重[房源地址]:</div>
                                                <Radio className="u-m-l-20">全部</Radio>
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="房源[2]" key="7">
                                    <div className="u-flex u-flex-wrap">
                                        <div className="u-flex u-m-t-10">
                                            <Checkbox className="u-m-l-20">修改房源【交易 状态 价格】强制发送留言（给房源归属人）</Checkbox>
                                        </div>
                                        <div className="u-flex u-m-t-10">
                                            <Checkbox className="u-m-l-20">修改房源状态为【有效】时提醒修改【委托日期】</Checkbox>
                                        </div>
                                        <div className="u-flex u-m-t-10">
                                            <Checkbox className="u-m-l-20">网络房（在房源列表显示图标）</Checkbox>
                                        </div>
                                        <div className="u-flex u-m-t-10">
                                            <Checkbox className="u-m-l-20">写跟进必须选择【跟进方式】</Checkbox>
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="房源[3]" key="8">
                                    <div>
                                        <div className="u-flex u-flex-wrap u-m-t-10">
                                            <div className="u-flex u-m-l-20">
                                                <span>房源价格</span>
                                                <Input className="u-m-l-10" style={{ width: 40, height: 20 }} defaultValue="30" />
                                                <span className="u-m-l-5">天内有变动的将显示升降标志</span>
                                            </div>
                                            <div className="u-m-l-20">
                                                <span>租金单价单位：</span>
                                                <Radio.Group>
                                                    <Radio value='1'>[元/m<sup>2</sup>/月]单价=月租金/面积</Radio>
                                                    <Radio value='2'>[元/m<sup>2</sup>/天]单价=月租金/面积/(365/12)天</Radio>
                                                </Radio.Group>
                                            </div>
                                            <div className="u-m-l-20">
                                                <span>出租房源佣金比例</span>
                                                <Input className="u-m-l-10" style={{ width: 60, height: 25 }} defaultValue="0.00" />%
                                            </div>
                                            <div className="u-m-l-20">
                                                <span>出售房源佣金比例</span>
                                                <Input className="u-m-l-10" style={{ width: 60, height: 25 }} defaultValue="0.00" />%
                                            </div>
                                        </div>
                                        <hr className="u-m-t-20" />
                                        <div className="u-m-l-10" style={{ color: 'red' }}>【图片设置】：</div>
                                        <div className="u-flex u-flex-wrap u-m-t-10">
                                            <div className="u-m-l-20">
                                                <span>图片文件大小不能超过</span>
                                                <Input style={{ width: 50, height: 20 }} defaultValue="500" />K
                                            </div>
                                            <div className="u-m-l-30">
                                                <Checkbox>只能通过【实勘】上传室内图</Checkbox>
                                                <span style={{ color: '#ccc' }}>(简介不能超过8字)</span>
                                            </div>
                                            <div className="u-m-l-30">
                                                <Checkbox>图片加文字水印</Checkbox>
                                                <Input style={{ width: 100, height: 20 }} defaultValue="东邦找家" />
                                                <span className="u-m-l-10">大小</span>
                                                <Input className="u-m-l-5" style={{ width: 50, height: 20 }} defaultValue="56" />
                                            </div>
                                            <div className="u-m-l-30">
                                                <span>图片缩放尺寸</span>
                                                <Input className="u-m-l-5" style={{ width: 60, height: 20 }} defaultValue="1200" />
                                            </div>
                                            <div className="u-m-l-20 u-m-t-20">
                                                <Checkbox>水印斜铺整张图片</Checkbox>
                                                <span>清晰度</span>
                                                <Input style={{ width: 50, height: 20 }} defaultValue="0.5" />
                                                <span className="u-m-l-10">位置</span>
                                                <Input className="u-m-l-5" style={{ width: 50, height: 20 }} defaultValue="居中" />
                                            </div>
                                            <div className="u-flex u-m-l-20 u-m-t-20">
                                                <Checkbox>图片加Logo水印</Checkbox>
                                            </div>
                                            <div>
                                                <Upload
                                                    name="Logo"
                                                    listType="picture-card"
                                                    className="avatar-uploader u-m-l-20 u-m-t-20"
                                                    showUploadList={false}
                                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                    beforeUpload={beforeUpload}
                                                    onChange={handleChange}
                                                >
                                                    {imageUrl ? (
                                                        <img
                                                            src={imageUrl}
                                                            alt="avatar"
                                                            style={{
                                                                width: '100%',
                                                            }}
                                                        />
                                                    ) : (
                                                        uploadButton
                                                    )}
                                                </Upload>
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="客源" key="9">
                                    <div>
                                        <div className="u-flex u-flex-wrap u-m-t-10">
                                            <div className="u-m-l-20">
                                                <Checkbox>客源编号可以手工输入</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>新增客源默认为【私客】</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>新增客源进行【黑名单】检查</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>打开资料区（客源）</Checkbox>
                                            </div>
                                        </div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[地址]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[面积]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[价格]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[来源]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[等级]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[类别]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[目的]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>客源[期限]必填</Checkbox>
                                            </div>
                                        </div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-20">
                                                <Checkbox>新增客源进行【电话】查重警告</Checkbox>
                                                <span style={{color:'#ccc'}}>（速度慢）</span>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>新增客源进行【身份证】查重警告</Checkbox>
                                                <span style={{color:'#ccc'}}>（速度慢）</span>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>【电话】或【身份证】重复客源拒绝保存</Checkbox>
                                                <span style={{color:'#ccc'}}>（速度慢）</span>
                                            </div>
                                        </div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-20">
                                                <Checkbox>修改客源【交易 状态】强制发送留言</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>[部分修改]权限可修改[客户电话]</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>[私房]屏蔽跟进记录</Checkbox>
                                                <span style={{color:'#ccc'}}>（有[看房]+[看跟进]权限/无[看私客]权限）</span>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>写跟进必须选择【跟进方式】</Checkbox>
                                            </div>
                                            <div className="u-m-l-20 u-m-t-10">
                                                <Checkbox>强制合并【同人.同天.同客源】的跟进记录</Checkbox>
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="其他设置" key="10">
                                    <div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-20">
                                                <Checkbox>员工[电话]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>员工[生日]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>员工[地址]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>员工[入职]必填</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>员工[身份证]必填</Checkbox>
                                            </div>
                                        </div>
                                        <div className="u-m-t-20">小程序外部房源显示权限</div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-20">
                                                <Checkbox>只展示有图片的房源</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>不展示私盘</Checkbox>
                                            </div>
                                            <div className="u-m-l-20">
                                                <Checkbox>只展示网络房</Checkbox>
                                            </div>
                                        </div>
                                        <div className="u-m-t-20">小程序授权</div>
                                        <div className="u-flex u-flex-wrap u-m-t-20">
                                            <div className="u-m-l-30">
                                                <div>手机授权</div>
                                                <Radio.Group>
                                                    <Radio value='首页'>首页</Radio>
                                                    <Radio value='房源详细'>房源详细</Radio>
                                                    <Radio value='联系经纪人'>联系经纪人</Radio>
                                                </Radio.Group>
                                            </div>
                                            <div className="u-m-l-30">
                                                <div>微信授权</div>
                                                <Radio.Group>
                                                    <Radio value='首页'>首页</Radio>
                                                    <Radio value='房源详细'>房源详细</Radio>
                                                </Radio.Group>
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
            <Footer />
        </React.Fragment>
    )




    function handleChange(info) {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

}

export default Setting;